import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  Button,StatusBar,
  TouchableOpacity,Modal,TextInput
} from 'react-native';
import VideoPlayer from 'react-native-video-player';
import BackButton from '../../component/BackButton';
export default class PlayerVideo extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      header: null
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      videoUrl: this.props.navigation.getParam('videoUrl'),//'http://192.168.31.65:8088/images/12.mp4',
      thumbnail:this.props.navigation.getParam('thumbnail'),
      video: { width: undefined, height: undefined, duration: undefined },
    })
  }
  componentWillUnmount(){
    //this.player.stop();
  }
  onBuffer(){

  }
  videoError(){

  }
  _close(){
    let {navigation} = this.props;
    if(navigation){
			//this.player.stop();
      navigation.pop();
    }
  }
  render(){
    const customStyles = {
      controls:{
        borderWidth:1,
        borderColor:'red',

      }
    }
    return(
      <View style={{flex:1,backgroundColor:'black',justifyContent:'space-between'}}>
				<StatusBar hidden={true}/>
        <TouchableOpacity style={{position:'absolute',left:20,top:20}} onPress={()=>this._close()}>
          <Image source={require('../../images/temp/icon_close.png')} style={{width:24,height:24}}/>
        </TouchableOpacity>
				<View></View>
        <VideoPlayer 
          endWithThumbnail
          thumbnail={{ uri: this.state.thumbnailUrl }}
          video={{ uri: this.state.videoUrl }}
          videoWidth={this.state.video.width}
          videoHeight={this.state.video.height}
          resizeMode="contain"
          autoplay={true}
          duration={this.state.video.duration/* I'm using a hls stream here, react-native-video
            can't figure out the length, so I pass it here from the vimeo config */}
          ref={r => this.player = r}
          //customStyles={customStyles}
        />
        <View></View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 10,
    left: 10,
    bottom: 10,
    right: 10,
    backgroundColor:'#000'
  },
  modal:{
    flex:1,
    backgroundColor: '#00bfff',
  },
})